<template>
	<div class="register-page">
		<div class="register-main">
			<el-card class="register-card" shadow="always">
				<div slot="header">
					<span>登录</span>
				</div>
				<div class="register-body">
					<el-form ref="registerForm" :model="registerForm" :rules="rules">
						<el-form-item prop="name">
							<el-input
								prefix-icon="el-icon-user-solid"
								placeholder="请输入用户名"
								v-model="registerForm.name"></el-input>
						</el-form-item>
						<el-form-item prop="passwordOne">
							<el-input
								prefix-icon="el-icon-lock"
								show-password
								placeholder="请输入密码"
								v-model="registerForm.passwordOne"></el-input>
						</el-form-item>
						<el-form-item prop="passwordTwo">
							<el-input
								prefix-icon="el-icon-lock"
								show-password
								placeholder="请确认密码"
								v-model="registerForm.passwordTwo"></el-input>
						</el-form-item>
						<el-form-item prop="role">
							<el-select
								v-model="registerForm.role"
								placeholder="请选择角色"
								style="width: 100%">
								<el-option label="超级管理员" :value="0"> </el-option>
								<el-option label="普通用户" :value="1"> </el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="register('registerForm')"
								>注册</el-button
							>
							<el-button type="warning" @click="toLogin">去登录</el-button>
						</el-form-item>
					</el-form>
				</div>
			</el-card>
		</div>
	</div>
</template>

<script>
import { register } from "@/api/Login";
export default {
	name: "Register",

	data() {
		return {
			registerForm: {
				name: "",
				passwordOne: "",
				passwordTwo: "",
				role: null,
			},
			rules: {
				name: [
					{ required: true, message: "请输入用户名", trigger: "blur" },
					{ min: 3, max: 10, message: "长度在3到10个字符", trigger: "blur" },
				],
				passwordOne: [
					{ required: true, message: "请输入密码", trigger: "blur" },
					{ min: 3, max: 10, message: "长度在3到10个字符", trigger: "blur" },
				],
				passwordTwo: [
					{ required: true, message: "请输入密码", trigger: "blur" },
					{ min: 3, max: 10, message: "长度在3到10个字符", trigger: "blur" },
				],
				role: [{ required: true, message: "请选择角色", trigger: "change" }],
			},
		};
	},

	mounted() {},

	methods: {
		register(registerForm) {
			console.log(this.registerForm.passwordTwo);
			this.$refs[registerForm].validate((val) => {
				if (val) {
					register(this.registerForm).then((res) => {
							if (res.code === "200") {
								this.registerForm = {};
								this.$router.push("/login");
								this.$message.success("注册成功！");
							}
						})
						.catch((err) => {
							console.log(err);
						});
				} else {
					this.$message.error("注册失败");
				}
			});
		},
		toLogin() {
			this.$router.push("/login");
		},
	},
};
</script>

<style lang="scss" scoped>
.register-page {
	min-height: 100vh;
	background-color: #409eff;
	.register-main {
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: center;
		.register-card {
			width: 400px;
			border-radius: 3%;
			div {
				text-align: center;
				span {
					font-size: 20px;
					font-weight: bold;
				}
			}
			.register-body {
			}
		}
	}
}
</style>
